<template>
	<view class="content">
		<view class="top" :style="{
			'background-image': $img('https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-05/164646710389905.png'),
			'padding-top':$top()+'px'
		}">
			<text>我的</text>
			<view class="top_1">
				<view class="top_1_1">
					<image @click="login()" :src="user.avatar" class="top_1_1_1" />
					<view class="top_1_1_2">
						<text>{{user.nickname}}</text>
						<text>設置個人資料</text>
					</view>

				</view>
				<view class="top_1_2" @click="showqian=true">
					簽到
				</view>
			</view>
			<view class="top_2">
				<view class="top_2_1" @click="$to('/pagesA/integral/integral')">
					<text>{{user.score}}</text>
					<text>積分</text>
				</view>
				<view class="top_2_1" @click="$to('/pagesA/comMission/comMission')">
					<text>
						<text style="font-size: 20rpx;display: inline-block">￥</text>
						{{user.money}}</text>
					<text>傭金</text>
				</view>
				<view class="top_2_1" @click="$to('/pagesA/myCoupon/myCoupon')">
					<text>{{user.coupon}}</text>
					<text>優惠券</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="body_1" @click="$to('/pagesA/memBership/memBership')" :style="{
			'background-image': $img('https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-05/164646698783410.png')
			 }">
				<view style="margin-left: 150rpx;">
					<text>澳葡VIP卡</text>
					<text>升级等级，获取积分</text>
				</view>

			</view>
			<view class="body_2">
				<view class="body_2_1" @click="$to('/pagesA/AllOrders/AllOrders')">
					<text>我的訂單</text>
					<text>查看全部 ></text>

				</view>
				<view class="body_2_2">
					<view class="body_2_2_1">
						<image src="../../static/img/ddan.png" mode=""></image>
						<text>全部订单</text>
					</view>
					<view class="body_2_2_1">
						<image src="../../static/img/dwc.png" mode=""></image>
						<text>待完成</text>
					</view>
					<view class="body_2_2_1">
						<image src="../../static/img/dfh.png" mode=""></image>
						<text>待發貨</text>
					</view>
					<view class="body_2_2_1">
						<image src="../../static/img/dqs.png" mode=""></image>
						<text>待簽收</text>
					</view>
					<view class="body_2_2_1">
						<image src="../../static/img/ywc.png" mode=""></image>
						<text>已完成</text>
					</view>

				</view>

			</view>
			<view class="body_3" :style="{
			'background-image': $img('https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-05/164646838796006.png')
			 }">
				<view class="body_3_1">
					<image src="../../static/img/gb.png" mode=""></image>
					<text>澳葡嚴選商城</text>
				</view>
				<view class="body_3_2">
					<text>
						澳門地址：澳門宋玉生廣場336-342號誠豐商業中心9樓
					</text>
				</view>
				<view class="body_3_2">
					<text>
						珠海地址：廣東省珠海市跨境工業園區僑光商業中心602B
					</text>
				</view>
				<view class="body_3_2">
					<text>
						電話：+756 5138064
					</text>
				</view>
				<view class="body_3_2">
					<text>
						手機：+853 66337733
					</text>
				</view>
				<view class="body_3_2">
					<text>
						郵箱：aopuguoji@163.com
					</text>
				</view>

			</view>
			<!-- 电话 -->
			<view class="body_4">
				<text>澳葡熱線：
					<text> +756 5138064</text>
				</text>
				<text>一鍵撥打</text>
			</view>
			<view class="body_5">
				<view class="body_5_1" @click="$to('/pages/index/make')">
					<text>企業采購 </text>
					<u-icon name="arrow-right" color="rgb(156,156,156)" size="12"></u-icon>
				</view>
				<view class="body_5_1" @click="$to('/pages/shopping/replace')">
					<text>地址管理</text>
					<u-icon name="arrow-right" color="rgb(156,156,156)" size="12"></u-icon>
				</view>
				<view class="body_5_1" @click="$to('/pages/shopping/subordinate')">
					<text> 分銷下級</text>
					<u-icon name="arrow-right" color="rgb(156,156,156)" size="12"></u-icon>
				</view>
				<view class="body_5_1 " style="border-bottom:  none;"
					@click="$to('/pagesA/UserAgreement/UserAgreement')">
					<text> 用戶協議 </text>
					<u-icon name="arrow-right" color="rgb(156,156,156)" size="12"></u-icon>
				</view>
			</view>
		</view>

		<!-- //签到 -->
		<u-mask :show="showqian" @click="showqian = false">
			<view class="warp1">
				<view>
					<view class="rect" @tap.stop>
						<view class="rect_1">
							<text class="rect_2">每日簽到</text>
							<view class="rect_3">
								<u-switch v-model="checked" />
								<text class="rect_2_1">簽到提醒</text>
							</view>
						</view>
						<view class="rect_4">
							<view class="rect_4_1">
								<block v-for="(item,index) in 7">
									<view class="rect_4_1_t" :style="{
									opacity: index==1?0.2:1,
									'background-color':'#00795E',
									}">
										<image v-if="index==0"
											src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672433518597.png" />

										<image v-else
											src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672419025136.png" />
									</view>
								</block>
							</view>
							<view class="rect_4_1_0">
								<view class="rect_4_2">
									<text :style="{
									'border':index==0?'3rpx solid #00795E':'3rpx solid #EEEEEE'
									 }" v-for="(item,index) in 7" />
								</view>
							</view>
						</view>
						<!-- <text class="qiandao">签到</text> -->
						<text class="yqiandao">已签到</text>



					</view>
					<image @click="showqian=false"
						src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672154631126.png" />
				</view>

			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showqian: false, //签到
				checked: false,
				userinfo: {},
				sinfo:{}
			};
		},
		onShow() {
			this.usere(),
			this.sgetingo()
		},
		computed: {
			user() {
				if (this.$store.state.ziti == 1) {
					return this.userinfo.simple
				} else {
					return this.userinfo.multiply
				}
			},

		},
		methods: {
			//获取商城信息
			sgetingo(){
				this.api('usermsg/addMsg').then(res=>{
					this.sinfo=res.data
				})
			},
			//获取个人信息
			usere() {
				this.api("usermsg/index").then(res => {
					this.userinfo = res.data
				})
			},
			//微信授权
			login() {
				if(this.user){
					this.$to("/pages/my/information")
					return
				}
				uni.getUserProfile({
					desc: '獲取您的昵稱、頭像、地區及性別',
					success: infoResy => {
						console.log(infoResy)
						let infoRes = infoResy.userInfo
						uni.login({
							provider: 'weixin',
							success: (res) => {
								const code = res.code
								this.api('user/sign_in', {
									code: code
								}).then(v => {
									const data = v.data
									this.api('user/WeChat', {
										openid: data.openid,
										name: infoRes.nickName,
										pic: infoRes.avatarUrl,
									}).then((t) => {
										// this.userinfo = t.data,
										uni.setStorageSync('token', t.data
											.token);
									this.usere()
										uni.showToast({
											title: '登录成功',
											duration: 2000
										})

									})
								})
							}
						})
					}
				});
			},
			submit() {
				//绑定手机号
				uni.navigateTo({
					url: '/pages/my/celPhone'
				})
				return
				uni.getUserProfile({
					desc: '獲取您的昵稱、頭像、地區及性別',
					success: infoRes => {
						console.log(JSON.parse(infoRes.rawData))
					}
				});
				return
				wx.login({
					success() {}
				})

			}
		}
	}
</script>

<style lang="scss">
	.warp1 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		border: 1rpx solid black;

		.rect {
			position: relative;
			margin-top: 50rpx;
			width: 590rpx;
			height: 464rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;

			.yqiandao {
				position: absolute;
				bottom: 30rpx;
				left: 50%;
				transform: translateX(-50%);
				display: block;
				margin: auto;
				text-align: center;
				width: 300rpx;
				height: 80rpx;
				background: #00795E;
				opacity: 0.5;
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

			.qiandao {
				position: absolute;
				bottom: 30rpx;
				left: 50%;
				transform: translateX(-50%);

				display: block;
				margin: auto;
				text-align: center;
				width: 300rpx;
				height: 80rpx;
				background: #00795E;
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

			/deep/.u-switch__node[data-v-4a8c9de7] {
				background: #00795E !important;

			}

			/deep/.u-switch[data-v-4a8c9de7] {
				border: 1rpx solid #00795E;
			}

			.rect_4 {
				.rect_4_1_t {
					width: 58rpx;
					height: 58rpx;
					border-radius: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 31rpx;
						height: 31rpx;
					}

				}

				margin-top: 50rpx;

				.rect_4_1 {
					display: flex;
					justify-content: space-around;
				}

				.rect_4_1_0 {
					padding-left: 30rpx;
					padding-right: 30rpx;
				}

				.rect_4_2 {
					margin-top: 20rpx;
					display: flex;
					border-bottom: 1rpx solid #EEEEEE;
					display: flex;
					justify-content: space-between;

					text {
						display: inline-block;
						position: relative;
						top: 8rpx;
						width: 19rpx;
						height: 19rpx;
						background: #FFFFFF;

						border-radius: 50%;

					}
				}

			}

			.rect_1 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rect_3 {
					display: flex;
					align-items: center;

					.rect_2_1 {
						margin-left: 20rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}

				.rect_2 {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #181818;
				}
			}
		}

		image {
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin: 20rpx auto;
		}
	}


	.content {
		.body {
			background-color: #F4F4F4;
			min-height: 1000rpx;
			padding: 30rpx;

			.body_5 {
				border-radius: 10rpx;
				background: #FFFFFF;
				padding: 0 30rpx 0rpx 30rpx;
				margin-top: 30rpx;

				.body_5_1 {

					text {
						font-size: 28rpx;
						font-family: Source Han Serif CN;
						font-weight: 500;
						color: #181818;
						line-height: 100px;
					}

					height: 100rpx;
					border-bottom: 1rpx solid #EDEDED;
					;
					align-items: center;
					display: flex;
					justify-content: space-between;
				}
			}

			.body_4 {
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx 0 30rpx;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #181818;

					text {
						font-size: 30rpx;
						font-family: Source Han Serif CN;
						font-weight: 600;
						color: #00795E;
					}
				}

				text:nth-of-type(2) {
					line-height: 60rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Source Han Serif CN;
					font-weight: 600;
					color: #FFFFFF;
					height: 60rpx;
					width: 140rpx;
					display: inline-block;
					background: #00795E;
					border-radius: 30rpx;
				}
			}

			.body_3 {
				background-size: 100% 100%;
				height: 345rpx;
				background-repeat: no-repeat;
				margin-top: 30rpx;

				.body_3_2 {
					padding-left: 30rpx;
					padding-right: 30rpx;
					height: 50rpx;
					display: flex;
					font-size: 24rpx;
					font-family: Source Han Serif CN;
					align-items: center;
					font-weight: 400;
					color: #181818;
				}

				.body_3_1 {
					display: flex;
					align-items: center;
					height: 85rpx;

					text {
						font-size: 32rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #181818;
					}

					image {
						margin-right: 20rpx;
						margin-left: 30rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.body_2 {
				margin-top: 30rpx;
				height: 280rpx;
				background: #FFFFFF;
				border-radius: 10rpx;

				.body_2_2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 180rpx;

					.body_2_2_1 {
						width: 20%;
						text-align: center;

						text {
							display: block;
							margin-top: 20rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: Source Han Serif CN;
							font-weight: 400;
							color: #181818;
						}

						image {
							width: 47rpx;
							height: 48rpx;
						}
					}
				}

				.body_2_1 {
					padding: 25rpx 20rpx 25rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #EDEDED;

					text:nth-of-type(1) {
						font-size: 36rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #181818;
					}

					text:nth-of-type(2) {
						font-size: 26rpx;
						font-family: Source Han Serif CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.body_1 {
				height: 120rpx;
				width: 100%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				border: 8rpx;
				display: flex;
				align-items: center;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #5D4026;
				}

				text:nth-of-type(2) {
					font-size: 24rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #C2834E;
				}

				text {
					display: block;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.top {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 100%;
			height: 456rpx;
			position: relative;

			.top_2 {
				position: absolute;
				width: 100%;
				bottom: 40rpx;
				display: flex;
				justify-content: space-around;

				.top_2_1 {
					text:nth-of-type(1) {
						font-size: 35rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #FFFFFF;
					}

					text:nth-of-type(2) {
						margin-top: 10rpx;
						font-size: 22rpx;
						font-family: Source Han Serif CN;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

			}

			text {
				text-align: center;
				display: block;
				font-size: 30rpx;
				font-family: Source Han Serif CN;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.top_1 {
			padding-left: 35rpx;
			padding-right: 35rpx;
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.top_1_2 {
				width: 147rpx;
				height: 70rpx;
				border: 1rpx solid #FFFFFF;
				border-radius: 35rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				font-family: Source Han Serif CN;
				font-weight: 600;
				color: #FFFFFF;
			}

			.top_1_1_2 {
				margin-left: 15rpx;

				text:nth-of-type(1) {
					font-size: 36rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #FFFFFF;
				}

				text:nth-of-type(2) {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #FFFFFF;

				}
			}

			.top_1_1 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					border-radius: 100%;
					width: 100rpx;
					height: 100rpx;
				}

			}

		}
	}
</style>
